<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="Dashboard/css/style.css" />
<style type="text/css">
	html {
		position: relative;
		height: 100%;
		display: block;
	}

	body {
		background-color: black;
		color: #efefef;
		font-family: Arial;
		font-size: smaller;
		padding: 1.5em 2.5em 3em 2.5em;
		box-sizing: border-box;
		display: block;
		position: relative;
		margin: 0;
		height: auto;
		height: 100%;
		min-height: 100%;
	}

	.wrapper {
		position: relative;
		margin: 0; 
		box-sizing: border-box;
		height: auto;
		min-height: 100%;
	}

	.header {
		background-color: #10a8ab;
		position: relative;
		height: 50px;
		vertical-align: middle;
	}

	.header:after {
		content: '';
		float: none;
		clear: both;
		display: block;
	}
	
	ul.menu-horizontal {
		list-style-type: none;
		margin: 0;
		padding: 0;
		display: inline-block;
		vertical-align: middle;
	}

	ul.menu-horizontal:after {
		content: '';
		clear: both;
		float: none;
		display: block;
	}

	ul.menu-horizontal li {
		padding: 5px 10px;
		box-sizing: border-box;
		height: 100%;
		cursor: pointer;
		display: inline-block;
		vertical-align: middle;
		float: left;
		position: relative;
	}

	ul.menu-horizontal li:before {
		content: '';
		display: inline;
		height: 100%;
		vertical-align: baseline;
	}

	ul.menu-horizontal li:hover {
		background-color: #666;
	}
	
	ul.menu-horizontal li.selected {
		background-color: #333333;
	}

	ul.menu-horizontal li.selected:after {
		content: '';
		height: 0;
		width: 0;
		display: block;
		position: absolute;
		bottom: 0;
		left: 50%;
		border-bottom: solid 8px #151515;
		border-top: solid 8px transparent;
		border-left: solid 8px transparent;
		border-right: solid 8px transparent;
		margin: 0 auto 0 -8px;
	}

	ul.menu-horizontal li.title a {
		font-size: larger;
		padding-left: 1em;
		padding-right: 1em;
	}

	ul.menu-horizontal li a:link {
		text-decoration: none;
		color: white;
		vertical-align: baseline;
		display: inline-block;
	}

	ul.menu-horizontal li a:visited {
		text-decoration: none;
		color: white;
		display: inline-block;
	}

	ul.menu-horizontal li a:hover {
		text-decoration: none;
		color: yellow;
		font-weight: bold;
		display: inline-block;
	}

	ul.menu-horizontal li a:active {
		text-decoration: none;
		color: red;
		font-weight: bold;
		display: inline-block;
	}

	.main-content {
		background-color: #151515;
		padding: 20px 0.5em 0.5em 0.5em;
		box-sizing: border-box;
		position: absolute;
		top: 50px;
		left: 0;
		right: 0;
		bottom: 0;
		height: auto;
		min-height: 590px;
	}

	.main-content:after{
		display: block;
		clear: both;
		float: none;
		content: '';
	}

	.fill-space {
		position: absolute;
		top: 40px;
		left: 0;
		right: 0;
		bottom: 0;
		height: auto;
		margin: 8px 16px;
		box-sizing: border-box;
	}

	.grid {
		background: transparent;
		box-sizing: border-box;
		float: left;
		border-collapse: collapse;
		margin: 0;
		position: relative;
		font-size: smaller;
	}

	.half-wide {
		width: 50%;
	}

	.quarter-wide {
		width: 25%;
	}

	.third-height {
		height: 33.33333%;
		min-height: 190px;
	}

	.two-thirds-height {
		height: 66.66666%;
		min-height: 380px;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	.strong {
		font-weight: bold;
	}

	.full-width {
		width: 100%;
	}

	.full-height {
		height: 100%;
	}

	.tile {
		background-color: rgb(38, 38, 40);
		background-color: rgba(38, 38, 40, 1);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
		padding: 8px 16px;
		box-sizing: border-box;
		margin: 0.6em 0.6em;
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tile .title-bar h2:after {
		content: "\2638";
		font-family: 'icomoon';
		speak: none;
		font-style: normal;
		font-weight: normal;
		font-variant: normal;
		text-transform: none;
		line-height: 1;

		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;

		float: right;
	}

	.tile .title-bar h2 {
		margin: 0;
		font-size: large;
		font-weight: normal;
	}
	
	.tile > .content {
		box-sizing: border-box;
		padding: 0.5em 0.7em 0 0;
		text-align: justify;
	}

	.tile > .content:before {
		content: '';
		display: block;
		width: 100%;
	}

	.tile > .content:after {
		content: '';
		display: inline-block;
		width: 100%;
	}

	.user-info {
	}

	.circular {
		height: 30px;
		width: 30px;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		background: url('Dashboard/images/profile.png') no-repeat center center;
	       	background-size: 100% 100%;	
		margin-top: 7.5px;
		border: solid 2px white;
	}

	.circle {
		display: block;
		border-radius: 50%;
		border-width: 2px;
		border-style: solid;
		border-color: inherit;
	}

	.seventy-percent-wide {
		width: 70%;
	}

	.twenty-percent-wide {
		width: 20%;
	}

	.bar {
		height: 1em;
		display: inline-block;
		background-color: #141416;
	}

	.bar .indicator {
		height: 100%;
		width: 0;
		background-color: #10a8ab;
		display: inline-block;
	}

	.large-font {
		font-size: large;
	}

	.normal-font {
		font-size: medium; 
	}

	.xx-large-font {
		font-size: xx-large;
	}

	.x-large-font {
		font-size: x-large;
	}

	.margin-left {
		margin-left: 10px;
	}

	.percentage:after {
		vertical-align: top;
		display: inline-block;
		margin-top: 2px;
		content: '%';
		font-size: medium;
	}

	.positive:before {
		content: '+';
		color: #12A7A8;
		margin-right: 5px;
	}

	.negative:before {
		content: '-';
		color: #12A7A8;
		margin-right: 5px;
	}

	.left-align {
		text-align: left;
	}

	.center-align {
		text-align: center;
	}

	.right-align {
		text-align: right;
	}

	.top-align {
		vertical-align: top;
	}

	.middle-align {
		vertical-align: middle;
		display: inline-block;
		text-align: center;
	}

	.middle-align:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		text-align: center;
	}
	
	.justify-align {
		text-align: justify;
	}

	.justify-align:before {
		content: '';
		display: block;
		width: 100%;
	}

	.justify-align:after {
		content: '';
		display: inline-block;
		width: 100%;
	}

	table.simple {
		width: auto;
		border-spacing: 0;
		margin: auto;
	}

	table.simple th, table.simple td {
		padding: 0.5em 0;
	}

	table.simple th:first-child, table.simple td:first-child {
		text-align: left;
	}

	table.simple th:nth-child(2), table.simple td:nth-child(2) {
		text-align: center;
	}

	table.simple th:last-child, table.simple td:last-child {
		text-align: right;
	}

	table.simple thead tr:last-child th, table.simple thead tr:last-child td {
		border-bottom: solid 1px white;
	}

	.stack-box {
		display: inline-block;
		min-width: 20px;
		max-width: 60px;
		width: 10%;
	}

	.stack-box .main {
		height: 60px;
		width: 100%;
	}

	.stack-box .minor {
		height: 30px;
		position: relative;
	}

	.stack-box .minor .content {
		position: absolute;
		z-index: 1;
		width: 100%;
		top: 25%;
	}

	.semi-transparent {
		position: relative;
	}

	.semi-transparent::before {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0.2;
		filter: alpha(opacity=20);
		z-index: 0;
		background-color: black;
	}

	.audience-stats-canvas-wrapper .flot-tick-label {
		color: #BDBDBF;
	}

	.row {
		margin: 1em 0;
	}

	.row:after {
		float: none;
		content: '';
		clear: both;
		display: block;
	}

	.row .col-left {
		float: left;
		width: auto;
		min-width: 50px;
		text-align: center;
	}

	.row .col-middle {
		float: left;
		width: auto;
		font-size: x-large;
		text-align: center;
		margin-top: 10px;
		min-width: 100px;
	}

	.row .col-right {
		margin-top: 25px;
		float: left;
		width: auto;
		text-align: center;
	}

	.stack-box .main .icon {
		font-size: large;
	}

	@media
	all 
	and (min-width : 800px)
	and (max-width : 1100px) {
		.row .col-middle {
			min-width: 10px;
			font-size: small;
		}

		.row .col-right {
			min-width: 10px;
		}
	}

	@media 
	only screen 
	and (min-device-width : 320px)
	and (max-device-width : 480px), 
	all 
	and (max-width : 800px) {
		body {
			position: relative;
			padding: 0;
		}

		.header {
			height: auto;
		}

		.wrapper {
		}

		.main-content {
			position: relative;
			top: 0;
		}

		.half-wide {
			width: 100%;
		}

		.quarter-wide {
			width: 100%;
		}

		ul.menu-horizontal {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display: block;
			vertical-align: middle;
		}
	
		ul.menu-horizontal:after {
			content: '';
			clear: both;
			float: none;
			display: block;
		}

		ul.menu-horizontal li {
			padding: 5px 10px;
			box-sizing: border-box;
			height: 100%;
			cursor: pointer;
			display: block;
			width: 100%;
			vertical-align: middle;
			position: relative;
		}

		ul.menu-horizontal li:first-child {
			height: 50px;
			padding-top: 15px;
		}

		ul.menu-horizontal li.selected:after {
			content: '';
			border: none;
		}

		ul.menu-horizontal.right {
			width: auto;
			float: right;
			position: absolute;
			right: 0;
		}

		ul.menu-horizontal.right li {
			float: left;
			width: auto;
			padding-top: 0;
		}
	}
</style>
<!--[if lt IE 9]>
	<script type="text/javascript" src="Dashboard/Scripts/html5/html5shiv.js"></script>
<![endif]-->
<!--[if lte IE 8]>
	<script language="javascript" type="text/javascript" src="Dashboard/Scripts/flot/excanvas.min.js"></script>
<![endif]-->
<script type="text/javascript" src="Dashboard/Scripts/jquery-1.8.3.js"></script>
<script type="text/javascript" src="Dashboard/Scripts/jquery.colorhelpers.js"></script>
<script type="text/javascript" src="Dashboard/Scripts/flot/jquery.flot.js"></script>
<script type="text/javascript" src="Dashboard/Scripts/flot/jquery.flot.comments.js"></script>
<script type="text/javascript" src="Dashboard/Scripts/flot/jquery.flot.time.js"></script>
<script type="text/javascript" src="Dashboard/Scripts/jquery.resize.js"></script>
<script type="text/javascript" src="Dashboard/Scripts/flot/jquery.flot.resize.js"></script>

<script type="text/javascript">
;(function($){
		$(document).ready(function(){
			var data = [
				{
					label: 'yellow',
					data: [
						[1394603200000, 14],
						[1396281600000, 20], 
						[1398873600000, 10], 
						[1401552000000, 10],
						[1404144000000, 10]
					]
				},
				{
					label: 'cyan',
					data: [
						[1394603200000, 6],
						[1396281600000, 10], 
						[1398873600000, 16], 
						[1401552000000, 21],
						[1404144000000, 15]
					]
				}
			];

			var options = {
				series: {
					lines: { show: true },
					points: { show: true }
				},
				legend: {
					show: false
				},
				xaxis: {
					mode: 'time',
				       	timeformat: '%b',
					monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
					ticks: null,
				       	tickColor: 'transparent',
				},
				grid: {
				      	show: true,
					borderWidth: 0
				},
				yaxis: {
					       tickColor: '#333'
				       },
				comment: {
						show: true,
						wrapperCss: {
				                	"background-color": "#F2AC64",
				                	"color": "white"
						}, 
						notch: {
                					color: "#F2AC64"
						       }
						
					 },
				comments: [
					  {
						  x: 1396281600000,
						     y: 20,
						     contents: '-22%'
					  }
					]
			};

			$.plot($('.audience-stats-canvas-wrapper'), data, options);

			data = [
			{
				label: 'followers',
					       data: [
						       [1, 0],
					       [2, 28000], 
					       [3, 11000],
					       [4, 16000],
					       [5, 0]
						       ],
					       lines: {
						       show: true,
							     fill: true
					       }
			},
			{
				label: 'likes',
				       data: [
					       [1, 0], 
				       [2, 15000],
				       [3, 10000],
				       [4, 20000],
				       [5, 0]
					       ],
				       lines: {
					       show: true,
						     fill: true
				       }
			}
				];

				options = $.extend(true, options, {
					series: {
						points: {
							show: false
						}
						},
					legend: {
						show: true,
						position: 'se'
					}
						});

			$.plot($('.monthly-summary-canvas-wrapper'), data, options);
		});
})(jQuery);
</script>
</head>
<body>
<div class="wrapper">
	<div class="header">
		<ul class="menu-horizontal right full-height">
			<li>
				<a href="#">
					<span class="icon icon-search"></span>
				</a>
			</li>
			<li>
				<a href="#" class="user-info">
					Jeff Tian
				</a>
			</li>
			<li>
				<div class="circular">
				</div>
			</li>
		</ul>
		<ul class="menu-horizontal left full-height">
			<li class="strong title">
				<a href="#">
					DashApp
				</a>
			</li>
			<li class="strong selected">
				<a href="#">
					<span class="icon icon-dashboard"></span>
					DASHBOARD
				</a>
			</li>
			<li>
				<a href="#">
					<span class="icon icon-chart"></span>
					REPORTS
				</a>
			</li>
			<li>
				<a href="#">
					<span class="icon icon-star"></span>
					FAVOURITES
				</a>
			</li>
		</ul>

	</div>
	<div class="main-content">
		<div class="grid half-wide third-height">
			<div class="tile">
				<div class="title-bar">
					<h2>Tablet Device usage</h2>
				</div>
				<div class="content">
					<span class="bar seventy-percent-wide">
						<span class="indicator" style="width: 42%"></span>
					</span>
					<span class="x-large-font margin-left percentage">42</span>
					<div class="normal-font">iOS</div>

					<span class="bar seventy-percent-wide">
						<span class="indicator" style="width: 36%"></span>
					</span>
					<span class="x-large-font margin-left percentage">36</span>
					<div class="normal-font">Android</div>

					<span class="bar seventy-percent-wide">
						<span class="indicator" style="width: 22%"></span>
					</span>
					<span class="x-large-font margin-left percentage">22</span>
					<div class="normal-font">Windows</div>
				</div>
			</div>
		</div>
		<div class="grid half-wide third-height">
			<div class="tile">
				<div class="title-bar">
					<h2>Best Selling</h2>
				</div>
				<div class="content">
					<table class="simple">
						<colgroup>
							<col class="twenty-percent-wide" />
							<col class="twenty-percent-wide" />
							<col class="twenty-percent-wide" />
						</colgroup>
						<thead>
							<tr>
								<th>Week</th>
								<th>Month</th>
								<th>Change</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>2nd</th>
								<th>JUN 2014</th>
								<td>
									<span class="positive">21%</span>
								</td>
							</tr>
							<tr>
								<th>3rd</th>
								<th>JUL 2014</th>
								<td>
									<span class="positive">14%</span>
								</td>
							</tr>
							<tr>
								<th>1st</th>
								<th>AUG 2014</th>
								<td>
									<span class="negative">10%</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="grid quarter-wide two-thirds-height">
			<div class="tile">
				<div class="title-bar">
					<h2>Monthly Summary</h2>
				</div>
				<div class="content">
					<div class="content fill-space">
						<div class="monthly-summary-canvas-wrapper full-height">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="grid quarter-wide two-thirds-height">
			<div class="tile">
				<div class="title-bar">
					<h2>Monthly Sales</h2>
				</div>
				<div class="content">
					<div class="row">
						<div class="circle center-align middle-align col-left" style="border-color: #10A8AB; height: 50px; width: 50px; float: left;">
							<span class="middle-align" style="display: inline-block;">AUG<br />2014</span>
						</div>
					 	<div class="col-middle middle-align" style="float: left;">
							10<sup>k</sup>
						</div>
						<div class="col-right middle-align" style="float: left;">
							<span style="color: #10A8AB;">+</span> 21%
						</div>
					</div>
					<div class="row">
						<div class="circle center-align middle-align col-left" style="border-color: #C68F45; height: 50px; width: 50px;">
							<span class="middle-align" style="display: inline-block;">AUG<br />2014</span>
						</div>
						<div class="col-middle middle-align">
							12<sup>k</sup>
						</div>
						<div class="col-right middle-align">
							<span style="color: #C68F45;">-</span> 10%
						</div>
					</div>
					<div class="row">
						<div class="circle center-align middle-align col-left" style="border-color: #E64B6A; height: 50px; width: 50px;">
							<span class="middle-align" style="display: inline-block;">AUG<br />2014</span>
						</div>
						<div class="col-middle middle-align">
							2<sup>k</sup>
						</div>
						<div class="col-right middle-align">
							<span style="color: #E64B6A;">+</span> 11%
						</div>
					</div>
					<p><br /></p>
					<div class="row">
						<div class="circle" style="border-color: #0AA8B4; width: 6px; height: 6px; background-color: #0AA8B4; margin-left: 2em; display: inline-block;"></div>
						<span>New Customers</span>
					</div>
					<div class="row">
						<div class="circle" style="border-color: #F1B253; width: 6px; height: 6px; background-color: #F1B253; margin-left: 2em; display: inline-block;"></div>
						<span>Sales</span>
					</div>
					<div class="row">
						<div class="circle" style="border-color: #DE5067; width: 6px; height: 6px; background-color: #DE5067; margin-left: 2em; display: inline-block;"></div>
						<span>Rebounds</span>
					</div>
				</div>
			</div>
		</div>
		<div class="grid quarter-wide third-height">
			<div class="tile square-tile">
				<div class="title-bar">
					<h2>Audience Stats</h2>
				</div>
				<div class="content fill-space">
					<div class="audience-stats-canvas-wrapper full-height"></div>
				</div>
			</div>
		</div>
		<div class="grid quarter-wide third-height">
			<div class="tile square-tile">
				<div class="title-bar">
					<h2>App Stats</h2>
				</div>
				<div class="content">
					<div style="height: 2em;"></div>

					<span class="bar full-width">
						<span class="indicator" style="width: 61.32%"></span>
					</span>
					<div style="margin: 0.5em 0;">
						<span class="icon icon-download"></span>

						iOS Downloads

						<span class="right">6132</span>
					</div>

					<span class="bar full-width">
						<span class="indicator" style="width: 81.64%"></span>
					</span>
					<div style="margin: 0.5em 0;">
						<span class="icon icon-upload"></span>

						Andriod Downloads

						<span class="right">8164</span>
					</div>
				</div>
			</div>
		</div>
		<div class="grid half-wide third-height">
			<div class="tile">
				<div class="title-bar">
					<h2>Social Media Engagement</h2>
				</div>
				<div class="content">
					<br /><br />
				<div class="justify-align">
					<div class="stack-box">
						<div class="main center-align middle-align">
							<span class="middle-align" style="display: inline-block; font-size: small;">
								AUG
								<br />
								2014
							</span>
						</div>
						<div class="minor">
						</div>
					</div>
					<div class="stack-box" style="background-color: #3469AC;">
						<div class="main center-align middle-align">
							<span class="icon icon-facebook">
							</span>
						</div>
						<div class="minor semi-transparent">
							<span class="content center-align">
								10k
							</span>
						</div>
					</div>
					<div class="stack-box" style="background-color: #49C2EB;">
						<div class="main center-align middle-align">
							<span class="icon icon-twitter">
							</span>
						</div>
						<div class="minor semi-transparent">
							<div class="content center-align">
								12k
							</div>
						</div>
					</div>
					<div class="stack-box" style="background-color: #DE5067;">
						<div class="main center-align middle-align">
							<span class="icon icon-googleplus">
							</span>
						</div>
						<div class="minor semi-transparent">
							<div class="content center-align">
								6k
							</div>
						</div>
					</div>
					<div class="stack-box" style="background-color: #F1B253;">
						<div class="main center-align middle-align">
							<span class="icon icon-email">
							</span>
						</div>
						<div class="minor semi-transparent">
							<div class="content center-align">
								2k
							</div>
						</div>
					</div>
					<div class="stack-box" style="background-color: #3A3A3A;">
						<div class="main center-align middle-align">
							<span class="icon icon-plus" style="opacity: 0.2;">
							</span>
						</div>
						<div class="minor semi-transparent">
							<div class="content center-align" style="opacity: 0.2;">
								0k
							</div>
						</div>
					</div>
					<div class="stack-box" style="background-color: #3A3A3A;">
						<div class="main center-align middle-align">
							<span class="icon icon-plus" style="opacity: 0.2;">
							</span>
						</div>
						<div class="minor semi-transparent">
							<div class="content center-align" style="opacity: 0.2;">
								0k
							</div>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>
